<!DOCTYPE html>
<html>
<head>
  <title>FormData</title>
  <style>
    .code-block {
      background-color: grey;
      color: lightgrey;
      border-radius: 2px;
      padding: 5px;
    }
  </style>
  <script>
    function log(s) {
      document.getElementById("out").innerHTML += `${s}\n`;
    }

    function dumpFormContents() {
      let form = document.getElementById("form1");
      form.onformdata = (e) => {
        log("Event 'formdata' fired.");
        log(`First name logged from the formdata event: ${e.formData.get("first_name")}\n`);
      }

      let formData = new FormData(form);
      let firstName = formData.get("first_name");
      let lastName = formData.get("last_name");
      let file = formData.get("avatar");
      let transportTypes = formData.getAll("transport_type");
      log(`First name: ${firstName}`);
      log(`Last name: ${lastName}`);
      log(`file: ${file.type}`);
      log("Transportation types:");
      for (let i = 0; transportTypes.length > i; i++)
          log(`  - ${transportTypes[i]}`);

      log("\n Iterate over keys: ")
      for (let key of formData.keys()) {
        log(`Key: ${key}`);
      }

      log("\n Iterate over values: ")
      for (let value of formData.values()) {
        log(`Value: ${value}`);
      }

      log("\n Iterate over entries: ")
      for (let entry of formData.entries()) {
        log(`Entry: ${entry[0]}, ${entry[1]}`);
      }
    }

    function postMultipartFormData() {
      let form = document.getElementById("form1");
      let formData = new FormData(form);
      let xhr = new XMLHttpRequest;

      xhr.open("POST", "http://localhost:8000");
      xhr.send(formData);
    }
  </script>
</head>
<body>
  <form id="form1">
    <label for="first_name">First name:</label><br>
    <input type="text" id="first_name" name="first_name" value="John"/><br>
    <label for="last_name">Last name:</label><br>
    <input type="text" id="last_name" name="last_name" value="Doe"/><br>
    <label for="avatar">Avatar:</label><br>
    <input type="file" id="avatar" name="avatar"/><br>

    <p>How do you usually transport yourself?</p>
    <input type="checkbox" id="transport_type1" name="transport_type" value="walking"/>
    <label for="transport_type1">Walk</label><br>
    <input type="checkbox" id="transport_type2" name="transport_type" value="public-transport"/>
    <label for="transport_type2">Public transportation</label><br>
    <input type="checkbox" id="transport_type3" name="transport_type" value="bicycle"/>
    <label for="transport_type3">Bicycle</label><br>
    <input type="checkbox" id="transport_type4" name="transport_type" value="motorcycle"/>
    <label for="transport_type4">Motorcycle</label><br>
    <input type="checkbox" id="transport_type5" name="transport_type" value="car"/>
    <label for="transport_type5">Car</label><br>
  </form>

  <button onclick="dumpFormContents()">Test FormData Features</button>

  <div style="padding-top: 30px; padding-left: 5px">To test multipart/form-data start a simple echo server:</div>
  <div style="padding-left: 10px; padding-bottom: 10px"><span class="code-block">while true; do printf 'HTTP/1.1 200 OK\n' | nc -Nl 8000; done</span></div>
  <button onclick="postMultipartFormData()">Test multipart/form-data</button>

  <pre id="out"></pre>
</body>
